<template>
	<view>
		<view class="card-box">
			<view>
				<image class="car-img"
					src="https://cloud.axureshop.com/gsc/Q61DYC/a5/39/7b/a5397b9206d0474f9e504ececfd8bedd/images/%E6%94%BB%E7%95%A5/u1635.png?token=66fd43a8b79f987a6169c3f3522033363ecfbcfbe7f30a20f3b361cb0ab2b083"
					mode=""></image>
			</view>
			<view class="card-textbox">
				<view class="big-txt">
					<text>普吉岛海滩哪个好？普吉岛10海滩全攻略</text>
				</view>
				<view class="small-txt">
					<text>吉岛拥有众多海滩，西侧是大片的海域，东侧与攀牙湾形成小海湾，因此大部分美丽的海滩位于普…</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

</script>

<style lang="scss" scoped>
	.card-box {
		width: 710rpx;
		height: auto;
		background-color: #f0f0f0;
		box-shadow: 5rpx 10rpx 0 #C7C7C7;
		border-radius: 30rpx;
		margin: 0 20rpx;

		.car-img {
			width: 710rpx;
			height: 384rpx;
		}
	}

	.card-textbox {
		display: flex;
		width: 710rpx;
		height: 200rpx;
		flex-direction: column;
		align-items: center;
	}

	.big-txt,
	.small-txt {
		width: 650rpx;
		height: 60rpx;
	}

	.big-txt {
		font-size: 35rpx;
	}

	.small-txt {
		height: 90rpx;
		color: #787878;
		display: -webkit-box;

		overflow: hidden;

		text-overflow: ellipsis;

		word-wrap: break-word;

		white-space: normal !important;

		-webkit-line-clamp: 2;

		-webkit-box-orient: vertical;

	}
</style>
